import { ListCategoryParam } from "@/api/category/CategoryModel";
import { reactive, ref, onMounted, nextTick } from "vue";
import { getListApi } from "@/api/category";
//表格相关的业务抽离
export default function useTable() {
    //表格高度
    const tableHeight = ref(0)
    //列表查询的参数
    const listParam = reactive<ListCategoryParam>({
        categoryName: '',
        currentPage: 1,
        pageSize: 10,
        total: 0 //分页参数
    })
    //接收表格数据
    const tableList = ref([])
    //列表查询
    const getList = async () => {
        let res = await getListApi(listParam);
        if (res && res.code == 200) {
            tableList.value = res.data.records;
            listParam.total = res.data.total;
        }
    }

    //搜索
    const searchBtn = () => {
        getList()
    }
    //重置
    const resetBtn = () => {
        listParam.currentPage = 1;
        listParam.categoryName = ''
        getList()
    }
    //当页容量改变的时候触发
    const sizeChange = (size: number) => {
        listParam.total = size
        getList()
    }
    //页数改变的时候触发
    const currentChange = (page: number) => {
        listParam.currentPage = page
        getList()
    }
    onMounted(() => {
        getList()
        nextTick(() => {
            tableHeight.value = window.innerHeight - 220
        })
    })
    return {
        listParam,
        getList,
        searchBtn,
        resetBtn,
        tableList,
        sizeChange,
        currentChange,
        tableHeight
    }
}